<template>
  <div class="pay-detail">
    <header-tar-bar :show-nav="showNav"></header-tar-bar>
    <scroll-nav-bar v-show="showScrollTarBar" :index="index" :showScrollTarBar="showScrollTarBar" @scrollTo="scrollTo"></scroll-nav-bar>
    <!-- 轮播图 -->
    <div class="banner-container">
      <van-swipe>
        <van-swipe-item v-for="(image, index) in covers" :key="index" @click="preview(index)">
          <img :src="image.url" />
        </van-swipe-item>
      </van-swipe>
      <!-- 现场图册 -->
      <div class="pic_count" v-if="pic_count > 0" @click="goToPreviewPics">
        {{ pic_count }}现场图册
        <span class="icon"></span>
      </div>
    </div>
    <!-- 头部信息 -->
    <header-info
      ref="header"
      :img_url="header_info.img_url"
      :title="header_info.title"
      :price="header_info.price1"
      :plus_desc="header_info.plus_price"
      :view_count="header_info.view_count"
      :go_card_discount="header_info.go_card_discount"
      :feed_count="header_info.feed_count"
      :name="header_info.name"
      :time="header_info.time"
      :id="cur_id"
      @edit-show="show = !show"
    >
    </header-info>
    <!-- 晒图 -->
    <side-pic ref="side" :id="id" :large_img="(side_pics && side_pics[0]) || {}" :small_img="(side_pics && side_pics.slice(1, 5)) || []" :side_video_count="side_video_count" @show-share-mask="showShareMask = true"></side-pic>
    <!-- 详情 -->
    <detail-desc ref="detail" :url="detail_url"></detail-desc>
    <!-- 活动须知 -->
    <notice-list ref="notice" :notices="noticeList"></notice-list>
    <!-- 附近列表 -->
    <div ref="nearby" class="nearby-list">
      <h2 class="title">附近热门打卡点</h2>
      <nearby-item v-for="item in nearbyList" :key="item.id" :pic_urls="item.covers" :title="item.title" :address="item.address" :distance="item.distance" :side_count="item.post_count" :video_count="item.video_post_count" :id="item.id" :type="item.type" @refresh="refreshPage"> </nearby-item>
    </div>
    <!-- 底部导航 -->
    <footer-tar-bar :invitation_count="invitation_count" :id="id" @show-share="showShare = true"></footer-tar-bar>
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" round closeable>
      <div class="service-box">
        <div>
          <span>
            <i class="icon icon-1"></i>
            正品保障
          </span>
          <div class="desc">走起平台所受服务均来源于正规渠道，保证所售票品均为正品真票</div>
        </div>
        <div>
          <span>
            <i class="icon icon-2"></i>
            假一赔三
          </span>
          <div class="desc">走起平台保证票品假一赔三</div>
        </div>
        <div>
          <span>
            <i class="icon icon-3"></i>
            极速售后
          </span>
          <div class="desc">票品问题与验票问题可享受极速售后，快速解决问题，无后顾之忧</div>
        </div>
      </div>
    </van-popup>
    <!-- 点击晒图专栏没有图片触发 -->
    <transition name="share">
      <share-page v-if="showShareMask" @hide-share="showShareMask = false"></share-page>
    </transition>
    <transition name="cell">
      <share-cell v-show="showShare" :id="id" @hide-share-cell="showShare = false" :showShare="showShare"></share-cell>
    </transition>
  </div>
</template>

<script>
import axios from '@/utils/request'
import NearbyItem from './NearbyItem.vue'
import DetailDesc from '@/components/go-pay-detail/DetailDesc'
import HeaderInfo from './HeaderInfo.vue'
import SidePic from './SidePic.vue'
import SharePage from '../public-detail/SharePage.vue'
import NoticeList from '@/components/go-pay-detail/NoticeList'
import FooterTarBar from '@/components/go-pay-detail/FooterTarBar'
import HeaderTarBar from './HeaderTarBar.vue'
import ScrollNavBar from './ScrollNavBar.vue'
import ShareCell from '../public-detail/ShareCell.vue'
import { bus } from '@/utils/bus/bus'
import { preview } from '@/utils/preview'
export default {
  props: ['id'],
  components: {
    NearbyItem,
    DetailDesc,
    HeaderInfo,
    SidePic,
    NoticeList,
    FooterTarBar,
    HeaderTarBar,
    SharePage,
    ShareCell,
    ScrollNavBar
  },
  data() {
    return {
      lat: '',
      lng: '',
      cur_id: '',
      showShareMask: false,
      showShare: false,
      show: false,
      // title: '', // 标题
      index: 0, // 当前滚动到什么地方
      detailInfo: null,
      pic_count: 0,
      showScrollTarBar: false,
      showNav: false, // 是否显示导航背景
      covers: [], // 轮播图列表
      nearbyList: [], // 附近数据列表
      noticeList: [], // 活动须知
      detail_url: '', // 详情地址
      header_info: {}, // 头部信息
      side_pics: [], // 晒图信息列表
      side_video_count: {}, // 图片和视频数量
      invitation_count: 0, // 约伴数量
      TopValueList: [], // 所有选项距离顶部的值
      sideY: 0,
      detailY: 0,
      noticeY: 0,
      nearbyY: 0
    }
  },
  methods: {
    // 请求详情数据
    async requestDetailData() {
      /*
      请求接口：https://api.xmonster.cn/v2/feeds/186505
      请求方式：get
      注：186505是当前点击的id
      */
      const data = await axios.get('/v2/feeds/' + this.id)
      if (data) {
        this.lat = data.addresses[0].lat
        this.lng = data.addresses[0].lng
        // 发请求获取附近数据
        this.requestNearby()
        this.detailInfo = data
        this.covers = data.covers
        this.noticeList = data.notice_items
        this.detail_url = data.introduction
        this.header_info = {
          img_url: data.poster_url,
          price1: data.price1,
          plus_price: data.go_card_discounted_price,
          view_count: data.view_count,
          go_card_discount: data.go_card_discount,
          time: data.time,
          name: data.addresses[0].name || data.business.name,
          feed_count: data.business.feed_count,
          title: data.title
        }
        // 晒图图片列表
        this.side_pics = data.post_covers
        // 视频数量和图片数量
        this.side_video_count['side_count'] = data.post_count
        this.side_video_count['video_count'] = data.video_post_count
        this.pic_count = data.pic_count
        this.invitation_count = data.invitation_count
        // 保存会员地址
        this.$store.commit('savePlusUrl', data.go_card_url)
        // 当前活动的id
        this.cur_id = data.business.id
      }
    },
    // 请求附近数据
    async requestNearby() {
      /*
      请求地址：https://api.xmonster.cn/v2/nearby/hot_points
      请求方式：get
      请求参数：
      params：{
        feed_id: 186505     当前点击的feed
        lat：'31.174122'
        lng:"121.44738"
        limit:10

      参数备注：这两个参数需要请求详情数据之后才能获取
      }
      */
      const data = await axios.get('/v2/nearby/hot_points', {
        params: {
          feed_id: this.id,
          lat: this.lat,
          lng: this.lng,
          limit: 10
        }
      })
      if (data && data.length > 0) {
        this.nearbyList = []
        data.forEach((item) => {
          // 定义对象保存数据
          let feed_item = {}
          if (item.feed) {
            feed_item['type'] = 'feed'
            feed_item['id'] = item.feed.id
            feed_item['covers'] = item.feed.covers
            feed_item['title'] = item.feed.title
            feed_item['address'] = item.feed.business.name
            feed_item['distance'] = item.feed.distance
            feed_item['post_count'] = item.feed.post_count
            feed_item['video_post_count'] = item.feed.video_post_count
          }
          if (item.business) {
            feed_item['type'] = 'business'
            feed_item['id'] = item.business.id
            feed_item['covers'] = item.business.pics
            feed_item['title'] = item.business.name
            feed_item['address'] = item.business.address
            feed_item['distance'] = item.business.distance
            feed_item['post_count'] = item.business.post_count
            feed_item['video_post_count'] = item.business.video_post_count
          }
          this.nearbyList.push(feed_item)
        })
      }
    },
    //前往图片详情页面

    // 滚动到指定位置
    goToPreviewPics() {
      this.$router.push('/posts/' + this.id)
    },
    scrollTo(val) {
      this.TopValueList.forEach((item) => {
        if (item.text == val) {
          window.scrollTo(0, item.top - 90)
        }
      })
    },
    // 添加方法
    pushToArr(text, top) {
      this.TopValueList.push({
        text,
        top
      })
    },
    async refreshPage() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      try {
        await this.requestDetailData()
      } catch {
        Toast.clear()
        this.$toast.fail('请检查网络！')
      } finally {
        Toast.clear()
        window.scrollTo(0, 0)
      }
    },

    // 预览轮播图
    preview(index) {
      let imgs = []
      this.covers.forEach((item) => {
        imgs.push(item.url)
      })
      preview(imgs, index)
    }
  },
  updated() {
    if (this.nearbyY == this.$refs.nearby.offsetTop) return
    this.nearbyY = this.$refs.nearby.offsetTop
    this.TopValueList.some((item) => {
      if (item.text == '附近') {
        item.top = this.$refs.nearby.offsetTop
        return true
      }
    })
  },
  mounted() {
    window.scrollTo(0, 0)
    // 获取晒图标签
    this.sideY = this.$refs.side.$el.offsetTop
    this.pushToArr('晒图', this.sideY)
    // 获取详情标签
    this.detailY = this.$refs.detail.$el.offsetTop
    this.pushToArr('详情', this.detailY)
    // 活动须知标签
    this.noticeY = this.$refs.notice.$el.offsetTop
    this.pushToArr('须知', this.noticeY)
    // 获取附近标签
    this.nearbyY = this.$refs.nearby.offsetTop
    this.pushToArr('附近', this.nearbyY)

    document.addEventListener('scroll', () => {
      let x = window.pageYOffset
      if (x >= 200) {
        this.showNav = true
      } else {
        this.showNav = false
      }
      if (x >= this.nearbyY - 90) {
        this.showScrollTarBar = true
        this.index = 3
      } else if (x >= this.noticeY - 90) {
        this.showScrollTarBar = true
        this.index = 2
      } else if (x >= this.detailY - 90) {
        this.showScrollTarBar = true
        this.index = 1
      } else if (x >= this.sideY - 90) {
        this.showScrollTarBar = true
        this.index = 0
      } else {
        this.showScrollTarBar = false
        this.index = 0
      }
    })
  },
  async created() {
    this.refreshPage()
  },
  beforeDestroy() {
    bus.$emit('preview')
  }
}
</script>

<style lang="less" scoped>
.pay-detail {
  background-color: #f1f1f1;
  padding-bottom: 50px;

  .van-popup {
    height: 350px;
    padding: 40px 10px 20px;

    .service-box {
      .desc {
        font-size: 12px;
        color: #777;
        line-height: 24px;
      }
      span {
        line-height: 24px;
        font-size: 18px;
        display: flex;
        font-weight: 700;
        color: #3a3a3a;
        padding: 20px 0;

        .icon {
          height: 24px;
          width: 24px;
          margin-right: 3px;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .icon-1 {
          background-image: url('@/assets//head/k6.png');
        }
        .icon-2 {
          background-image: url('@/assets//head/Ut.png');
        }
        .icon-3 {
          background-image: url('@/assets//head/b9.png');
        }
      }
    }
  }

  .banner-container {
    height: 220px;
    position: relative;
    background-color: #eee;

    .pic_count {
      position: absolute;
      right: 10px;
      bottom: 40px;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 999px;
      padding: 5px 10px;
      border: 1px solid #fff;
      color: #fff;

      .icon {
        display: inline-block;
        height: 12px;
        width: 12px;
        transform: translateY(1px);
        background-image: url('@/assets//arrow/Eo.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
    }

    ::v-deep .van-swipe__track,
    .van-swipe {
      width: 100vw !important;
      height: 100%;
    }

    ::v-deep .van-swipe__indicators {
      bottom: 40px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nearby-list {
    padding: 10px;
    background-color: #fff;

    .title {
      font-size: 18px;
      font-weight: 600;
      color: #4a4a4a;
    }
  }

  .share-enter,
  .share-leave-to {
    opacity: 0;
  }
  .share-enter-active,
  .share-leave-active {
    transition: all 0.3s linear;
  }
  .share-enter-to,
  .share-leave {
    opacity: 1;
  }

  .cell-enter-to,
  .cell-leave {
    transform: translateY(0%);
  }
  .cell-leave-active,
  .cell-enter-active {
    transition: all 0.3s linear;
  }
  .cell-leave-to,
  .cell-enter {
    transform: translateY(100%);
  }
}
</style>
